<template>
	<em-page class="tab-search" :em-styles="pageStyles">
		<em-scroller class="scroller">
			<em-header-inset></em-header-inset>
			<view class="em-panel classify">
				<view class="em-panel-content">
					<view class="classify-list">
						<view class="classify-item"
							:style="[{'width': `${systemInfo.windowWidth-28*2}px`, 'height': `${systemInfo.windowWidth/6}px`}, $em.$getThemeStyle(['bg-color-1'])]"
							v-for="(x, xi) in classifies" :key="x.id" @click="Jump(x)">

							<text class="classify-item-label"
								:style="[$em.$getThemeStyle(['color-1'])]">{{x.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<em-tab-bar-inset></em-tab-bar-inset>
		</em-scroller>
		<!-- 	<em-header-search class="header" :em-styles="headerStyles" :search-btn="headerSearchBtn" v-model="keywords"
			@confirm="confirmSearch" placeholder="搜索商品..."></em-header-search> -->
		<em-header class="header" title="发现" :em-styles="headerStyles"></em-header>
	</em-page>
</template>

<script>
	import mixin from '../../mixins/tab'
	import {
		mapState
	} from 'vuex'

	let app = {}
	// #ifdef MP-WEIXIN
	app = getApp({
		allowDefault: true
	}).$vm
	// #endif
	// #ifndef MP-WEIXIN
	app = getApp({
		allowDefault: true
	})
	// #endif

	export default {
		mixins: [mixin],
		data() {
			return {
				/* 搜索关键词 */
				keywords: '',
				/* 分类列表 */
				classifies: []
			}
		},
		computed: {
			...mapState([
				'systemInfo'
			]),
			pageStyles() {
				return {
					wrap: app.$getThemeStyle(['bg-color--1'])
				}
			},
			headerStyles() {
				return {
					wrap: app.$getThemeStyle(['bg-color-1', this.headerShowShadow ? 'shadow-1' : 'shadow-0']),
					title: app.$getThemeStyle(['color-1'])
				}
			},
			headerSearchBtn() {
				return {
					iconUnicode: '\uf0d1',
					styles: {
						btn: app.$getThemeStyle(['bg-color-101']),
						icon: app.$getThemeStyle(['color-101'])
					}
				}
			}
		},
		created() {
			// 因为nvue不支持挂载vue实例方法，但是又可以通过getApp()获取到vue实例和所挂载的方法，然后将this.$em替换，这样模板中就可以使用$em调用vue实例方法了
			this.$em = app.$em
		},
		methods: {
			load() {
				console.log('search on load')
				this.getCategoryList()
			},
			show() {
				console.log('search on show')
			},
			hide() {
				console.log('search on hide')
			},
			async getCategoryList() {
				let res = await app.$api.getCategoryList();
				this.classifies = res.data
			},
			Jump(item) {
				switch (item.id) {
					case '1': // 头像生成
						app.$navigateTo(
							'/pages/web/web?url=' + encodeURIComponent(
								"https://static-mp-8a9cbeb0-904c-4738-9531-ea9fe6b516ee.next.bspapp.com/dist/index.html"
							)
						);
						break;
					case '2': // 尺子
						app.$navigateTo(
							'/pages/web/web?url=' + encodeURIComponent(
								"https://static-mp-8a9cbeb0-904c-4738-9531-ea9fe6b516ee.next.bspapp.com/docs/index.html#/Tools"
							)
						);
						break;
					case '3': // 手持弹幕
						app.$navigateTo(
							'/pages/web/web?url=' + encodeURIComponent(
								"https://static-mp-8a9cbeb0-904c-4738-9531-ea9fe6b516ee.next.bspapp.com/docs/index.html#/Barrage"
							)
						);
						break;
					case '5':
						// 卡牌对对碰
						app.$navigateTo('/game/supperzzle/supperzzle');
						break;
					case '6':
						// 激情飞车
						app.$navigateTo('/game/car/car');
						break;
					case '7':
						// 美女图片
						app.$navigateTo('/freeApi/images/images');
						break;
					case '8':
						// 历史上的今天
						app.$navigateTo('/freeApi/today/today');
						break
					case '9':
						// 搞笑段子
						app.$navigateTo('/freeApi/joke/joke');
						break
					case '10':
						// 城市列表
						app.$navigateTo('/freeApi/city/city');
						break;
					case '11':
						// 电话区号
						app.$navigateTo('/freeApi/areaCode/areaCode');
						break;
					case '12':
						// 今日油价
						app.$navigateTo('/freeApi/oilPrices/oilPrices');
					default:
						break;
				}
			},
			confirmSearch(e) {
				if (e.value) {
					uni.showToast({
						icon: 'none',
						title: `搜索：${e.value}`
					})
				}
			}
		}
	}
</script>

<style>
	.header {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 101;
	}

	.scroller {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
	}

	.classify {
		padding: 10px 0 24px 0;
	}

	.classify-list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 28px;
	}

	.classify-item {
		position: relative;
		justify-content: center;
		align-items: center;
		height: 58px;
		margin-top: 14px;
		border-radius: 12px;
		overflow: hidden;
		transition-property: background-color;
		transition-duration: 0.25s;
	}

	.classify-item-image-wrap {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.classify-item-image {
		border-radius: 12px;
		overflow: hidden;
	}

	.classify-item-mask {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 12px;
		overflow: hidden;
	}

	.classify-item-label {
		position: absolute;
		z-index: 1;
		font-size: 14px;
		font-weight: 700;
	}
</style>